import { FC } from "react";
import { Button, Input } from "antd";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import "./index.scss";

type PropType = {
  placeholder?: string;
  showAdd?: boolean;
  onChange: any;
  onAdd?: any;
};
const Search: FC<PropType> = (props): JSX.Element => {
  const { placeholder, showAdd, onChange, onAdd } = props;

  return (
    <div className="search">
      <div className="keyword">
        <Input
          size="small"
          placeholder={placeholder}
          prefix={<SearchOutlined />}
          onChange={onChange}
        ></Input>
      </div>
      {showAdd && (
        <div className="add">
          <Button type="text" size="small" icon={<PlusOutlined />} onClick={() => onAdd()}></Button>
        </div>
      )}
    </div>
  );
};

export default Search;
